<!--
 * @docName: electronicPasswordsList.vue
 * @Author: mwl
 * @Date: 2024/12/4
 * @LastEditors: zhongxiong
 * @LastEditTime: 17:11
-->
<template>
  <div class="main_content">
    <div class="header_invioce">
      <h3>电子税务局密码管理</h3>
    </div>
    <div class="table-page-search-wrapper" style="margin-top: 10px;">
      <a-form layout="inline">
        <a-row :gutter="24" style="margin-top: 10px">
          <a-col :md="6" :lg="6" :xl="4" :xxl="4">
            <a-form-item label="企业名称">
              <a-input placeholder="请输入" v-model="queryParam.entName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :lg="6" :xl="4" :xxl="4">
            <a-form-item label="密码状态">
              <a-select
                v-model="queryParam.statusList"
                mode="multiple"
                style="width: 100%"
                placeholder="请选择"
              >
                <a-select-option v-for="item in statusList" :key="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :lg="6" :xl="4" :xxl="4">
            <a-form-item label="登录身份">
              <a-select
                v-model="queryParam.typeList"
                mode="multiple"
                style="width: 100%"
                placeholder="请选择"
              >
                <a-select-option v-for="item in typeList" :key="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :lg="6" :xl="4" :xxl="4">
            <span  class="table-page-search-submitButtons">
             <a-button type="primary" @click="searchQuerys" icon="search">查询</a-button>
              <a-button @click="searchResets" icon="reload" style="margin-left: 10px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div style="margin-bottom: 20px">
     <a-button type="primary" :disabled="!hasSelected" @click="notifyCustomersFun" :loading="loading">短信通知客户更新密码</a-button>
    </div>
    <div>
      <a-table
        ref="table"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="tableData"
        :pagination="ipagination"
        :loading="loading"
        :row-selection="rowSelection"
        :scroll="{ x: 1500 }"
        @change="handleTableChange">

        <!-- 字符串超长截取省略号显示-->
        <span slot="esContent" slot-scope="text">
          <j-ellipsis :value="text" :length="10" />
        </span>
        <span slot="type" slot-scope="text, record">
          {{{ 0: '经营者',1: '办税员', 2: '开票员', 3: '财务负责人', }[text] }}
        </span>
            <span slot='password' slot-scope="text, record">
              <visibleAndHidden :value='text'></visibleAndHidden>
        </span>
            <span slot="status" slot-scope="text, record">
          <a-tag :color="{ 0: '#d9d9d9',1: '#ffac56', 2: '#f50', 3: '#d9d9d9', 3: '#d9d9d9' }[text] ">
            {{{ 0: '未设置',1: '使用中', 2: '密码错误', 3: '已删除', 4: '已停用', }[text] }}
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
          <a v-if='record.status === 2' href="javascript:;" @click="notifyCustomersPassFun(record)">管理密码</a>
          <span v-else style='color: #ccc;'>密码管理</span>
        </span>
      </a-table>
    </div>
    <!--管理密码-->
    <a-modal :width='800' :visible="visiblePassWord" title="管理密码" :footer="null" @cancel="handleCancelPass">
      <a-form-model
        :label-col="labelCol" :wrapper-col="wrapperCol"
        ref="rulePassForm"
        :model="passForm"
        :rules="passRules"
      >
        <a-form-model-item label='个体工商户名称' prop="entName">
          <a-input disabled placeholder="请输入个体工商户名称" v-model="passForm.entName"></a-input>
        </a-form-model-item>
        <a-form-model-item label='姓名' prop="name">
          <a-input disabled placeholder="请输入姓名" v-model="passForm.name"></a-input>
        </a-form-model-item>
        <a-form-model-item label='社会统一信用代码' prop="lisenceCreditCode">
          <a-input disabled placeholder="请输入社会统一信用代码" v-model="passForm.lisenceCreditCode"></a-input>
        </a-form-model-item>
        <a-form-model-item label='电子税务局登录密码' prop="password">
          <a-input-password placeholder="请输入电子税务局登录密码" v-model="passForm.password" allowClear></a-input-password>
        </a-form-model-item>
        <div style="text-align: center">
          <a-button type="primary" @click="onPassSubmit">
            提交
          </a-button>
        </div>
      </a-form-model>
    </a-modal>
    <!--通知客户-->
    <a-modal :width='800' :visible="visible" title="通知客户" :footer="null" @cancel="handleCancel">
      <a-form-model
        layout="inline"
        ref="ruleForm"
        :model="form"
        :rules="rules"
      >
        <a-form-model-item prop="notifyContent">
          {{notifyContentHtml}} <a-input style='width: 150px' placeholder="请输入联系方式" v-model="form.notifyContent"></a-input>
        </a-form-model-item>
        <div style="text-align: center">
          <a-button type="primary" @click="onSubmit">
            提交
          </a-button>
          <a-button style="margin-left: 10px;" @click="resetForm">
            重置
          </a-button>
        </div>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { cloneObject } from '@/utils/util'
import {
  electronTaxPasswordUpdate,
  getElectronTaxPasswordAllList,
  getNotifySubmit
} from '@api/electronicPasswordsApi'
import visibleAndHidden from '@/views/electronicPasswords/visibleAndHidden'
export default {
  name: 'electronicPasswordsList',
  components:{
    visibleAndHidden
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      loading: true,
      toggleSearchStatus: false,
      queryParam: {},
      form: {
        notifyContent:'',
        all:0,
        handleType:1,
        showFlag:1,
        online:0,
        clientType:2,
        notifyType:1,
        shortChain:604800
      },
      rules: {
        notifyContent: [{ required: true, message: '请填写联系方式', trigger: 'blur' }],
      },
      statusList:[
        { label: '未设置', value: '0' },
        { label: '使用中', value: '1' },
        { label: '密码错误', value: '2' },
        { label: '已删除', value: '3' },
      ],
      typeList:[
        { label: '经营者', value: '0' },
        { label: '办税员', value: '1' },
        { label: '开票员', value: '2' },
      ],
      visible:false,
      visiblePassWord:false,
      passForm:{
        entName: '',
        name: '',
        lisenceCreditCode: '',
        password: '',
      },
      passRules:{
        entName: [{ required: true, message: '请填写个体户名称', trigger: 'blur' }],
        name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
        lisenceCreditCode: [{ required: true, message: '请填写社会统一信用代码', trigger: 'blur' }],
        password: [{ required: true, message: '请填写电子税务局登录密码', trigger: 'blur' }],
      },
      tableData:[],
      columns: [
        {
          title: '个体工商户名称',
          align: 'center',
          width: 240,
          dataIndex: 'entName',
          scopedSlots: {customRender: 'esContent'}
        },
        {
          title: '社会统一信用代码',
          dataIndex: 'lisenceCreditCode',
          align: 'center',
          width: 220
        },
        {
          title: '登录身份',
          dataIndex: 'type',
          align: 'center',
          width: 140,
          scopedSlots: {customRender: 'type'}
        },
        {
          title: '姓名',
          align: 'center',
          width: 140,
          dataIndex: 'name',
        },
        {
          title: '密码',
          dataIndex: 'password',
          align: 'center',
          width: 240,
          scopedSlots: { customRender: 'password' },
        },
        {
          title: '密码状态',
          dataIndex: 'status',
          scopedSlots: {customRender: 'status'},
          align: 'center',
          width: 180
        },
        {
          title: '最后一次更新时间',
          dataIndex: 'lastCheckTime',
          align: 'center',
          width: 240
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: {customRender: 'action'},
          align: 'center',
          width: 100,
          fixed: 'right'
        }
      ],
      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return " 共" + total + "条"
        },
        showSizeChanger: true,
      },
      selectedRowKeys:[]
    }
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          // console.log(`下标: ${selectedRowKeys}`, '数据: ', selectedRows);
          this.selectedRowKeys = selectedRowKeys;
          console.log('selectedRowKeys-----',this.selectedRowKeys)
        },
        getCheckboxProps: record => ({
          props: {
            disabled: this.hasSelected
          },
        }),
      };
    },
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
    // 计算属性来判断当前季度并替换通知内容中的季度信息
    notifyContentHtml() {
      const now = new Date(); // 获取当前时间
      const month = now.getMonth() + 1; // 获取当前月份，月份是从0开始的，所以需要+1
      let quarter = '';
      if (month >= 1 && month <= 3) {
        quarter = '1';
      } else if (month >= 4 && month <= 6) {
        quarter = '2';
      } else if (month >= 7 && month <= 9) {
        quarter = '3';
      } else {
        quarter = '4';
      }
      // 替换通知内容中的变量
      return '尊敬的${channelName}客户：您好! 第'+quarter+'季度申报即将开始，因您提供的名下个体工商户（${entName}）电子税务局密码不正确，我司暂无法协助您按时完成纳税申报。请及时前往${entPassUrl}更新电子税务局密码。如有疑问，可致电联系我司客服：';
    },
  },
  mounted() {
    this.getTableData();
  },
  methods:{
    //通知客户
    notifyCustomersPassFun(record){
      this.passForm = cloneObject(record);
      this.visiblePassWord = true;
    },
    //关闭通知客户弹窗
    handleCancelPass(){
      this.visiblePassWord = false;
      this.passForm = {};
    },
    //通知客户
    notifyCustomersFun(){
      this.visible = true;
    },
    //关闭通知客户弹窗
    handleCancel(){
      this.visible = false;
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.verifyPassword()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onPassSubmit(){
      this.$refs.rulePassForm.validate(valid => {
        if (valid) {
          let params = cloneObject(this.passForm);
          params.source = 1;
          params.showFlag = 1;

          console.log('params',params)
          //修改
          electronTaxPasswordUpdate(params).then(res => {
            if (res.success) {
              this.$message.success('提交成功！')
              this.visiblePassWord = false;
              this.getTableData();
            } else {
              this.$message.warning(res.message)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //通知客户表单重置
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    //通知客户
    verifyPassword(){//批量处理类型：1.通知客户
      // 准备基础参数
      let params = {};
      const queryParam = cloneObject(this.queryParam);
      const formNew = cloneObject(this.form);
      console.log('this.notifyContentHtml',this.notifyContentHtml)
      formNew.notifyContent = this.notifyContentHtml+formNew.notifyContent;
      params = { ...queryParam, ...formNew };
      params.ids = this.selectedRowKeys;
      console.log(params)
      getNotifySubmit(params).then(res => {
        if (res.success) {
          this.$message.success('通知发送成功！')
          this.visible = false;
          this.selectedRowKeys = [];
          this.getTableData();
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //首次获取表格数据
    getTableData(){
      this.loading = true;
      let params = {}; //查询条件
      let paramsNew = cloneObject(this.queryParam);
      params.data = paramsNew;
      params.pageNo = this.ipagination.current;
      params.pageSize = this.ipagination.pageSize;
      getElectronTaxPasswordAllList(params).then(res => {
        if (res.success) {
          const data = res.result || {};
          // // 赋值表格数据
          this.tableData = data.records || [];
          // 赋值总条数
          this.ipagination.total = data.total || 0;
          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //查询
    searchQuerys() {
      this.ipagination.current=1;
      this.selectedRowKeys = []
      this.getTableData();
    },
    //重置
    searchResets() {
      this.ipagination.current=1;
      this.queryParam = {};
      this.selectedRowKeys = []
      this.getTableData();
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      this.ipagination = pagination;
      this.selectedRowKeys = []
      this.getTableData();
    },
  }
}
</script>

<style scoped lang="less">
.main_content{
  color: @color-smudge;
}

h3,h4{
  font-weight: bolder;
}
h3{
  font-size: 20px;
}
h4{
  font-size: 18px;
  margin-bottom: 20px;
}

.header_invioce{
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
